<script setup>
import {
  addStudentService,
  getClassListService,
  editStudentService,
  getTeacherListService,
} from "@/api/user.js";
import { ref, onMounted } from "vue";
const DrawerVisible = ref(false);
const defaultForm = {
  code: "",
  klass: "",
  name: "",
  phone: "",
  password: "",
};
const emit = defineEmits(["success"]);
const formModel = ref({ ...defaultForm });
const classList = ref([]);
const teacherData = ref([]);
const getClassList = async () => {
  const res = await getClassListService();
  classList.value = res.data;
};
const getTeacherList = async () => {
  const res = await getTeacherListService();
  teacherData.value = res.data.teacher;
};
onMounted(() => {
  getClassList();
  getTeacherList();
});

const onSubmit = async () => {
  if (formModel.value._id) {
    await ElMessageBox.confirm("你确认编辑吗", "温馨提示", {
      type: "warning",
      confirmButtonText: "确认",
      cancelButtonText: "取消",
    });
    await editStudentService({
      id: formModel.value._id,
      student: formModel.value,
    });
    ElMessage.success("编辑成功");
    DrawerVisible.value = false;
    emit("success", "edit");
  } else {
    await ElMessageBox.confirm("你确认添加吗", "温馨提示", {
      type: "warning",
      confirmButtonText: "确认",
      cancelButtonText: "取消",
    });
    await addStudentService({ user: formModel.value });
    ElMessage.success("添加成功");
    DrawerVisible.value = false;
    emit("success", "add");
  }
  DrawerVisible.value = false;
};
const open = async (row) => {
  DrawerVisible.value = true;
  formModel.value = { ...row };
};

defineExpose({
  open,
});
</script>
<template>
  <el-drawer
    v-model="DrawerVisible"
    :title="formModel._id ? '编辑学生信息' : '添加学生'"
    direction="rtl"
    size="50%"
  >
    <el-form label-width="100px" :model="formModel" ref="form">
      <el-form-item label="班级">
        <el-select
          value-key="_id"
          v-model="formModel.klass"
          class="m-2"
          placeholder="请选择班级"
          style="width: 240px"
        >
          <el-option
            v-for="item in classList"
            :key="item._id"
            :label="item.code"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="导师" prop="teacher">
        <el-select
          value-key="_id"
          v-model="formModel.teacher"
          class="m-2"
          placeholder="请选择导师"
        >
          <el-option
            v-for="item in teacherData.filter((item) => item.mentor == true)"
            :key="item._id"
            :label="item.name"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="formModel.code" placeholder="请输入学号"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="formModel.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机">
        <el-input
          v-model="formModel.phone"
          placeholder="请输入手机号码"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          v-model="formModel.password"
          type="password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSubmit" type="primary">提交</el-button>
        <el-button @click="DrawerVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>